<template>
    <div class="login">
        <div class="title">密码登录</div>
        <van-form @submit="login">
            <van-field v-model="formData.phone"  placeholder="手机/用户名"
                :rules="[{ required: true, message: '请输入手机/用户名' ,pattern:/^1[3-9]\d{9}$/}]" />
            <van-field v-model="formData.pass" type="password" placeholder="密码"
                :rules="[{ required: true, message: '请填写密码',pattern:/^\d{4}$/ }]" />
            <div class="btn" style="margin: 40px 0;">
                <van-button round block type="info" native-type="submit" style="background:#ccc;color:#666;font-size:18px;outline:none;border: none;">登录</van-button>
            </div>
        </van-form>
    </div>
</template>
<!-- 13888888888  8888 -->
<script>
import { Toast } from 'vant';
import {user_login} from '../utils/api'
export default {
    data() {
    return {
      formData: {phone:'',pass:''}
    };
  },
  methods: {
    login() {
      user_login(this.formData).then((res)=>{
        if(res.data.code==200){
            //保存token
            localStorage.setItem('token',res.data.token);
            //保存登录用户信息
            localStorage.setItem('userinfo',JSON.stringify(res.data.userinfo));
            // 请求当前用户的收藏列表
            this.$store.dispatch('request_favlist')
            //调用vuex中的异步方法，请求当前用户的购物车列表
            this.$store.dispatch('request_shopcartlist')
            this.$router.push('/');
            Toast.success('登录成功!')
        }else{
            Toast.fail('登录失败！')
            this.$router.push('/register');
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.login{
    margin: 0 20px;
    .title{
        font-weight: bold;
        font-size: 30px;
        margin:50px 0 20px 20px
    }
}
.van-field{
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color:#666;
    border-bottom: 1px solid #ccc;
}

</style>